<template>
  <header>
    <el-button @click="saveContainer">保存</el-button>
  </header>
  <div class="itxst">
    <div class="menu-lists">
      <div class="title">控件</div>
      <draggable
        class="menu-draggable"
        :list="elements"
        v-bind="{
          group: { name: 'element', pull: 'clone', put: false },
          sort: false,
        }"
        item-key="id"
        ghost-class="ghost"
        chosen-class="chosenClass"
        animation="300"
        @end="onEnd"
      >
        <template #item="{ element }">
          <div class="item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>
    <drag-container @update="updateDrag" />
    <drag-config />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import Draggable from 'vuedraggable';
import { elements } from '@/utils/elements';
import { useFormStore } from '@/store/form';
import DragContainer from '@/components/Container.vue';
import DragConfig from '@/components/Config.vue';
import { ElementItem } from '@/utils/elements';

export default defineComponent({
  components: {
    Draggable,

    DragContainer,
    DragConfig,
  },
  setup() {
    /**
     * draggable 对CSS样式没什么要求万物皆可拖拽
     * :list="state.list" 需要绑定的数组
     * ghost-class="ghost"  被替换元素的样式
     * chosen-class="chosenClass" 选中元素的样式
     * animation="300"  动画效果
     * @start="onStart"  拖拽开始事件
     * @end="onEnd"  拖拽结束事件
     * 
     * group:{
        name:'itxst',//分组名称itxst的组之间可以相互拖拽
        pull:true|false|function,//是否允许拖入当前组
        put:true|false|function,//是否允许拖出当前组
      }
     */
    const onStart = () => {
      console.log('开始拖拽');
    };
    const contentStart = (eve: Event) => {
      console.log(eve, 'content:开始拖拽');
    };

    const form = useFormStore();
    const container = ref<ElementItem[]>([]);
    const updateDrag = (value: ElementItem[]) => {
      container.value = value;
      console.log(value, 'update');
    };
    const onEnd = (eve: any) => {
      // form.activeEle = container.value[eve.newIndex];

      console.log('结束拖拽', container.value, eve);
    };
    const saveContainer = () => {
      localStorage.setItem('container', JSON.stringify(container.value));
    };

    return {
      form,
      container,
      elements,
      saveContainer,
      updateDrag,
      onStart,
      contentStart,
      onEnd,
    };
  },
});
</script>

<style scoped lang="less">
header {
  text-align: right;
  padding: 10px 20px;
}
.itxst {
  // width: 600px;
  display: flex;
  gap: 10px;
  background-color: #f5f6f6;
  height: calc(100% - 52px);

  .menu-lists {
    flex: 2;
    background-color: #fff;
    padding: 0 10px;
    .title {
      font-size: 16px;
      margin: 6px 0;
    }
    .menu-draggable {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .item {
      border: solid 1px #eee;
      padding: 6px 10px;
      text-align: left;
      margin-bottom: 10px;
      width: 48%;
      box-sizing: border-box;
      border-radius: 4px;
    }

    .item:hover {
      cursor: move;
      background-color: #409eff;
      color: #fff;
    }
  }
}

.ghost {
  border: solid 3px #409eff;
}
.chosenClass {
  padding: 6px 10px;
  background-color: #f1f1f1;
  width: 100%;
  height: 38px;
}
</style>
